<template>
  <div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <h1>{{ 'Test Model' }}</h1>

    <div>&nbsp;</div>
    <button @click="onclick"><H1> 编辑页面</H1></button>
    <button @click="onclickSubmit"><H1> Submit</H1></button>

    <div>
      <h6>编辑页面</h6>
      {{ values }}

      <a-form-model>
        <div>全称: {{ values_edit.display_name }}</div>
        <a-form-model-item label="名称">
          <!-- <a-input v-model="values_edit.name" /> -->
          <OInput
            v-model="values_edit.name"
            @change="val => handelChange('name', val)"
          />
        </a-form-model-item>

        <!-- <a-form-model-item label="条码">
          <OInput
            v-model="values_edit.barcode"
            @change="val => handelChange('barcode', val)"
          />
        </a-form-model-item>

        <a-form-model-item label="编码">
          <OInput
            v-model="values_edit.default_code"
            @change="val => handelChange('default_code', val)"
          />
        </a-form-model-item> -->

        <a-form-model-item label="价格">
          <OInputNumber
            v-model="values_edit.list_price"
            @change="val => handelChange('list_price', val)"
          />
        </a-form-model-item>

        <div>不含税价: {{ values_edit.tax_string }}</div>

        <a-form-model-item label="类别">
          <OMany2one
            v-model="values_edit.categ_id"
            :options="many2one_select_options.categ_id"
            width="120px"
            @change="val => handelChange('categ_id', val)"
          />
        </a-form-model-item>
      </a-form-model>
    </div>

    <div>&nbsp;</div>
    <div>&nbsp;</div>

    <div>&nbsp;</div>
    <button @click="onclickLogin"><H1>Login</H1></button>

    <div>
      <h2>-- session_info.server_version---</h2>
      {{ session_info.server_version }}

      <h2>-- session_info.uid---</h2>
      {{ session_info.uid }}

      <h2>-- session_info.username---</h2>
      {{ session_info.username }}

      <h2>-- session_info.name---</h2>
      {{ session_info.name }}

      <h2>-- context---</h2>
      {{ context }}
    </div>
  </div>
</template>

<script>
import api from '@/odoorpc'

import OInput from '@/components/OInput/OInput.vue'
import OInputNumber from '@/components/OInput/OInputNumber.vue'
import OMany2one from '@/components/OInput/OMany2one.vue'

// const baseURL = 'http://192.168.56.108:8069'
const baseURL = process.env.VUE_APP_BASE_API
const timeout = 50000
api.init({ baseURL, timeout })

const fields = [
  'name',
  'display_name',
  'type',
  'barcode',
  'default_code',
  'categ_id',
  'list_price',
  'tax_string'
]

export default {
  name: 'TestDataset',

  components: {
    OInput,
    OInputNumber,
    OMany2one
  },

  props: {},
  data() {
    return {
      session_info: {},
      context: {},

      fields_info: {},
      res_id: 0,

      record: {}, // 原始读到的数据
      values_edit: {},
      values: {},
      edit_model: undefined,

      many2one_select_options: {
        categ_id: []
      }
    }
  },
  computed: {},

  async created() {},
  methods: {
    onclickSubmit() {
      console.log('onclickSubmit')

      if (this.edit_model) {
        this.edit_model.commit({
          callback: result => {
            console.log('onclickSubmit  cb', result)
            // goto 详情页面
          }
        })
      }
    },

    async handelChange(fname, value) {
      // console.log(fname, value)
      // 这里 是父组件的  handelChange

      if (this.edit_model) {
        this.edit_model.onchange({
          fname,
          value,
          callback: result => {
            const { values = {} } = result
            this.values = { ...values }
            this.values_edit = { ...this.values_edit, ...values }
          }
        })
      }
    },

    async onclick() {
      const Model = await api.env.model('product.template', { fields })

      this.fields_info = Model._fields

      const result = await Model.search_read({
        domain: [],
        fields: ['name', 'display_name']
      })

      console.log('result:', result)
      const res_id = result[0].id

      this.res_id = res_id
      const res = await Model.read(res_id, { fields })
      const one = res[0]
      this.record = { ...one }
      this.values_edit = { ...one }

      this.edit_model = Model.init_edit_model({
        res_id: this.res_id,
        record: { ...this.record },
        values: { ...this.values }
      })

      const m2o_options_categ = await this.get_many2one_options('categ_id')
      console.log(m2o_options_categ)
      this.many2one_select_options.categ_id = m2o_options_categ
    },

    async get_many2one_options(field) {
      console.log(this.fields_info)

      const meta = this.fields_info[field] || {}
      if (meta.type !== 'many2one') {
        return []
      }

      const relation = meta.relation
      const Relation = api.env.model(relation)
      const res = await Relation.name_search()
      // console.log(res)

      return res
    },

    async onclickLogin() {
      console.log('click btn')
      const kwargs = { db: 'T1', login: 'admin', password: '123456' }
      const result = await api.web.session.authenticate(kwargs)
      console.log('result:', result)
      this.session_info = result
      this.context = api.web.session.context
    }
  }
}
</script>

<style scoped></style>
